<template>
    <div style="padding-bottom: 50px;padding-top: 46px;">
        <van-nav-bar
                :fixed="fixed"
                title="商城"
        />
        <!--<div>-->
        <!--<van-search placeholder="请输入搜索关键词" v-model="value" />-->

        <!--</div>-->
        <!--分割线-->
        <!--首页整体布局-->
        <div class="content">
            <!--分类列表-->
            <div :style="{width: '30%',height:leftHeight+'px',overflow:'auto'}" class="van-hairline--right van-hairline">
                <div v-for="(item,index) in items" class="navigation-list">
                    <div :class="{active:index==isActive}" @click="checkItem(index,item.id)">
                        {{item.name}}
                    </div>
                </div>
            </div>
            <!--商品列表-->
            <div :style="{width: '70%'}">
                <!--<ul>-->
                <!--<li >-->
                <!--<img src="https://shop.io.mi-img.com/app/shop/img?id=shop_b8246d2d4880bcd0935aacca0add9c17.jpeg&w=786&h=395" :style="{width:'100%'}">-->
                <!--</li>-->
                <!--</ul>-->
                <div v-for="commodity in CommodityList" class="flex-list">
                    <div class="commodity-list-img" @click="commodityList(commodity.id,commodity.name)">
                        <div v-if="commodity.thumbnail==''" class="category-icon">
                            <img src="../../static/category3.png"/>
                        </div>
                        <div v-if="commodity.thumbnail!=''" class="category-icon">
                            <img :src="commodity.thumbnail"/>
                        </div>
                        <span :style="{fontSize:'12px'}">{{commodity.name}}</span>
                    </div>
                </div>

            </div>
        </div>
        <bottom tab="mall"></bottom>
    </div>
</template>

<script>
    import {Categories, allSubCategories} from "../api/data";
    import Vue from 'vue'
    import {Search} from 'vant';

    Vue.use(Search);
    import search from '../components/search';
    import bottom from '@/pages/bottom';

    var url = "http://localhost:8080/static/data.json";
    export default {
        data() {
            return {
                listid: 0,
                value: '',
                fixed: true,
                isActive: 0,
                borderImg: false,
                id: 1,
                items: [],
                CommodityList: [],
                leftHeight: document.documentElement.clientHeight - 50 - 46
            }
        },
        methods: {
            onCancel() {

            },
            checkItem(index, id) {
                this.isActive = index;
                this.borderImg = true;
                console.log(id)
                allSubCategories(id).then(res => {
                    this.CommodityList = res.data.data
                })
            },
            commodityList(id, title) {
                console.log('Y轴' + window.scrollTop)
                console.log('X轴' + window.scrollX)
                this.$router.push({
                    path: `/commodity/${id}/${title}`
                })
            }
        },
        created() {
            Categories().then(res => {
                console.log(res.data)
                var date = []
                for (var i = 0; i < res.data.data.list.length; i++) {
                    let data = []
                    if (res.data.data.list[i].path.split('-').length == 2) {
                        data['id']   = res.data.data.list[i].id
                        data['name'] = res.data.data.list[i].name
                        data['path'] = res.data.data.list[i].path.split('-')
                        date.push(data)
                    }
                }
                this.items  = date
                if (this.listid == '') {
                    this.listid = date[0].id
                }
                allSubCategories(this.listid).then(re => {
                    console.log(re.data.data)
                    this.CommodityList = re.data.data
                })
            })
        },
        components: {
            search,
            bottom
        }
    }
</script>

<style scoped>
    .flex-list {
        padding: 5px 5px 0 5px;
        float: left;
        font-size: 14px;
        width: 33.33%;
        text-align: center;
    }

    .commodity-list-img img {
        width: 100%;
    }

    .category-icon {
        padding: 10px 10px 0px 10px;
    }

    .navigation-list {
        text-align: center;
        font-size: 13px;
        line-height: 50px;
        margin: 0px 0;
        width: 100%;
    }

    .navigation-list .active {
        border-left: 1px solid red;
        color: red;
        background: #f9f9f9;
    }

    .content {
        display: flex;
    }

    .border-img {
        font-size: 20px;
        position: absolute;
        left: 1px;
        margin-top: -3px;
    }

    .division-line {
        height: 1px;
        border-top: 1px solid #ddd;
        text-align: center;
    }

    .sidebar-left {
        height: 1000px;
        /*padding-left: 4px;*/
        border-right: 1px solid #dddddd;
    }

    ul {
        list-style-type: none;
    }



    ul li {
    }

    .search {
        height: 60px;
    }

</style>
